<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style type="text/css">
			.grid {
				margin: auto;
				width: 530px;
				text-align: center;
			}

			.grid table {
				border-top: 1px solid #C2D89A;
				width: 100%;
				border-collapse: collapse;
			}

			.grid th,
			td {
				padding: 10;
				border: 1px dashed #F3DCAB;
				height: 35px;
				line-height: 35px;
			}

			.grid th {
				background-color: #F3DCAB;
			}

			.grid .book {
				padding-bottom: 10px;
				padding-top: 5px;
				background-color: #F3DCAB;
			}

			.grid .total {
				height: 30px;
				line-height: 30px;
				background-color: #F3DCAB;
				border-top: 1px solid #C2D89A;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="grid">
				<div>
					<h1>图书管理</h1>
					<div class="book">
						<div>
							<label for="id">
								编号：
							</label>
							<input type="text" id="id" v-model='id' disabled="false" v-focus>
							<label for="name">
								名称：
							</label>
							<input type="text" id="name" v-model='name'>
							<button @click='handle' :disabled="submitFlag">提交</button>
						</div>
					</div>
				</div>
				<div class="total">
					<span>图书总数：</span>
					<span>{{total}}</span>
				</div>
				<table>
					<thead>
						<tr>
							<th>编号</th>
							<th>名称</th>
							<th>时间</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr :key='item.id' v-for='item in books'>
							<td>{{item.id}}</td>
							<td>{{item.name}}</td>
							<td>{{item.date | format('yyyy-MM-dd hh:mm:ss')}}</td>
							<td>
								<a href="" @click.prevent='toEdit(item.id)'>修改</a>
								<span>|</span>
								<a href="" @click.prevent='deleteBook(item.id)'>删除</a>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/axios.js"></script>
		<script type="text/javascript">
			/*
      图书管理-添加图书
    */

			// axios配置
			axios.defaults.baseURL = 'http://localhost:3000/';
			axios.interceptors.response.use(function(res) {
				return res.data;
			}, function(error) {
				console.log(error)
			});



			Vue.directive('focus', {
				inserted: function(el) {
					el.focus();
				}
			});
			Vue.filter('format', function(value, arg) {
				function dateFormat(date, format) {
					if (typeof date === "string") {
						var mts = date.match(/(\/Date\((\d+)\)\/)/);
						if (mts && mts.length >= 3) {
							date = parseInt(mts[2]);
						}
					}
					date = new Date(date);
					if (!date || date.toUTCString() == "Invalid Date") {
						return "";
					}
					var map = {
						"M": date.getMonth() + 1, //月份 
						"d": date.getDate(), //日 
						"h": date.getHours(), //小时 
						"m": date.getMinutes(), //分 
						"s": date.getSeconds(), //秒 
						"q": Math.floor((date.getMonth() + 3) / 3), //季度 
						"S": date.getMilliseconds() //毫秒 
					};
					format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
						var v = map[t];
						if (v !== undefined) {
							if (all.length > 1) {
								v = '0' + v;
								v = v.substr(v.length - 2);
							}
							return v;
						} else if (t === 'y') {
							return (date.getFullYear() + '').substr(4 - all.length);
						}
						return all;
					});
					return format;
				}
				return dateFormat(value, arg);
			})
			var vm = new Vue({
				el: '#app',
				data: {
					flag: false,
					submitFlag: false,
					id: '',
					name: '',
					books: []
				},
				methods: {
					handle: async function() {
						if (this.flag) {
							// 编辑图书
							var ret = await axios.put('books/' + this.id, {
							  name: this.name
							});
							if(ret.status == 200){
							  // 重新加载列表数据
							  this.queryData();
							}
							this.flag = false;
						} else {
							var ret = await axios.post('books', {
								name: this.name
							})
							if (res.status == 200) {
								this.queryData()
							}
						}
						// 清空表单
						this.id = '';
						this.name = '';
					},

					toEdit: async function(id) {
						// flag状态位用于区分编辑和添加操作
						this.flag = true;
						// 根据id查询出对应的图书信息
						var ret = await axios.get('books/' + id);
						this.id = ret.id;
						this.name = ret.name;

					},
					deleteBook: async function(id) {
						// 删除图书
						// 根据id从数组中查找元素的索引
						// var index = this.books.findIndex(function(item){
						//   return item.id == id;
						// });
						// 根据索引删除数组元素
						// this.books.splice(index, 1);
						// -------------------------
						// 方法二：通过filter方法进行删除
						// this.books = this.books.filter(function(item) {
						// 	return item.id != id;
						// });
						// 删除图书
						var ret = await axios.delete('books/' + id);
						if(ret.status == 200) {
						  // 重新加载列表数据
						  this.queryData();
						}
						
						
					},
					queryData: async function() {
						this.books = await axios.get('books')
					}
				},
				computed: {
					total: function() {
						// 计算图书的总数
						return this.books.length;
					}
				},
				watch: {
					name: async function(val) {
						// 验证图书名称是否已经存在
						// var flag = this.books.some(function(item) {
						// 	return item.name == val;
						// });
						var ret = await axios.get('/books/book/' + this.name)
						console.log(ret)

						if (ret.status == 1) {
							// 图书名称存在
							this.submitFlag = true;
						} else {
							// 图书名称不存在
							this.submitFlag = false;
						}
					}
				},
				mounted: function() {
					//axios.get('books').then((data)=>{
					// 	this.books  = data.data
					// })
					this.queryData()
				}
			});
		</script>
	</body>
</html>
